<template>
    
    <a-table rowKey="groupid"  :bordered="true" :pagination="false" :columns="colname" :data-source="datalist"  >
        <template #action="{ record }">
            <a-button size="small" @click="delgroup(record.groupid)"   shape="round" danger>删除</a-button>
            <a-button size="small" class="edit" @click="editgroup(record.groupid)"  shape="round" type="primary">编辑</a-button>
        </template>
    </a-table>
    <a-drawer :title="ctitle" v-model:visible="showv" width="580">
        <router-view @gbs="closedraw"></router-view>
    </a-drawer>
    <div class="adds">
        <a-button shape="circle" @click="toadd" type="primary"><PlusCircleOutlined /></a-button>
    </div>
</template>
<style lang="less" scoped>
.edit{
    margin-left:18px;
}
.adds{
    margin-top: 15px; text-align: right;
}
</style>
<script>
import { defineComponent, reactive,ref } from 'vue';
import { grouplist,groupdel } from '@/api/user';
import { useRouter } from 'vue-router';
import {PlusCircleOutlined} from '@ant-design/icons-vue';

export default defineComponent({
    components:{PlusCircleOutlined},
    setup() {
        const colname=[
            {
                title:'编号',
                dataIndex:'groupid',
                key:'groupid',
                align:'center',
                width:'100px'
            },
            {
                title:'名称',
                dataIndex:'name',
                key:'name',
                align:'center',
                width:'320px'
            },
            {
                title:'积分',
                dataIndex:'score',
                key:'score',
                align:'center',
            },
            {
                title:'说明',
                dataIndex:'description',
                key:'description',
                align:'center',
            },            
            {
                title:'操作',
                key:'action',
                align:'center',
                width:'300px',
                slots:{customRender:'action'}
            }

        ];

        const datalist=reactive([]);
        const showv=ref(false);
        const router=useRouter();
        const ctitle=ref('');

        const toadd=()=>{
            showv.value=true;
            ctitle.value='添加用户组';
            router.push({name:'addGroup',params:{}});  
        };
        const delgroup=(id) =>{
            groupdel({groupid:id}).then(
                res=>{
                    closedraw();
                },
                err=>{
                    console.log(err);
                }
            )
        };

        const editgroup=(id) =>{
            showv.value=true;
            ctitle.value='编辑用户组';
            router.push({name:'editGroup',params:{groupid:id,name:'修改'}});            
            
        };
        

        const getuserlist = () =>{
            grouplist({}).then(res=>{                
               datalist.length=0;
               datalist.push(...res.data['data']['datalist']);
               
            },
            err=>{
                console.log(err);
            }
            )
        };

        const closedraw = () =>{
            showv.value=false;
            getuserlist();
        };


        
        getuserlist();

        return {
            colname,datalist,delgroup,editgroup,showv,ctitle,closedraw,toadd
            
        }
    },
})
</script>
